<template>
  <Modal v-model="visible" width="840" class="source-model">
      <div class="source-menu">
        <h1>表单</h1>
        <ul>
          <li class="active">
            基础表单
          </li>
          <li>高级表单</li>
        </ul>
      </div>
      <div class="source-content">
        <div class="source-list">
          <div @click="handlerAddElement('input')" class="source-item-form source-item-form-input">
            <i></i>
            <p>输入框</p>
          </div>
          <div @click="handlerAddElement('textarea')" class="source-item-form source-item-form-textarea">
            <i></i>
            <p>多行输入框</p>
          </div>
          <div @click="handlerAddElement('select')" class="source-item-form source-item-form-select">
            <i></i>
            <p>下拉菜单</p>
          </div>
          <div @click="handlerAddElement('radio')" class="source-item-form source-item-form-radio">
            <i></i>
            <p>单项选择</p>
          </div>
          <div @click="handlerAddElement('checkbox')" class="source-item-form source-item-form-checkbox">
            <i></i>
            <p>多项选择</p>
          </div>
          <div @click="handlerAddElement('button', '提交')" class="source-item-form source-item-form-button">
            <i></i>
            <p>提交按钮</p>
          </div>
        </div>
      </div>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
import { Vue, Component, Watch, Model, Emit} from 'vue-property-decorator'
import ModalSync from "@/mixins/ModalSync"
import {
  State,
  Getter,
  Action
} from 'vuex-class'
@Component({
  mixins: [ModalSync]
})
export default class SourceForm extends Vue {
  @Action actAddElement
  visible=false
  handlerAddElement (subtype, text=''):void {
    let newElement = {
      type: "form",
      subtype: subtype,
      name: '',
      extra: {
       options: [{value: "选项一", label: "选项一"}],
       color: '#000',
       value: text,
       name: ''
      }

    }
    this.actAddElement(newElement)
    this.visible = false
  }
}

</script>
<style lang="less" scoped>
.source-model{
  .source-list {
    overflow: hidden;
  }
  .source-item {
    float: left;
    text-align: center;
    width: 30%;
  }
}
</style>
